<template>
    <view class="login-container">
        <view class="tip">
            {{ displayText }}
            <text v-if="showCursor" class="cursor">|</text>
        </view>
        <button class="login-btn" @click="handleLogin" :loading="loading">一键登录</button>
    </view>
</template>

<script>
import randomName from '@/utils/name.js';
const platform = uniCloud.importObject('platform', {
    customUI: true
});
const users = uniCloud.importObject('users', {
    customUI: true
});
export default {
    data() {
        return {
            loading: false,
            fullText: '记录通往目标的过程，不仅是一本记录的册子，更是一种生活方式，拾起每一个值得关注的瞬间，衡量自己的步伐，感知生活的变化！',
            displayText: '',
            typewriterTimer: null,
            currentIndex: 0,
            showCursor: true
        };
    },
    onLoad() {
        this.startTypewriter();
    },
    beforeDestroy() {
        if (this.typewriterTimer) {
            clearInterval(this.typewriterTimer);
        }
    },
    methods: {
        startTypewriter() {
            this.typewriterTimer = setInterval(() => {
                if (this.currentIndex < this.fullText.length) {
                    this.displayText += this.fullText[this.currentIndex];
                    this.currentIndex++;
                    // 清除当前定时器
                    clearInterval(this.typewriterTimer);
                    // 设置随机延迟时间，范围在100-300ms之间
                    const randomDelay = Math.floor(Math.random() * 180) + 80;
                    // 使用setTimeout来创建下一个字符的定时器
                    this.typewriterTimer = setTimeout(this.startTypewriter, randomDelay);
                } else {
                    this.showCursor = false;
                }
            }, 80);
        },
        async handleLogin() {
            try {
                uni.showLoading();
                this.loading = true;
                const [err, res] = await uni.login({ provider: 'weixin' });
                if (err) {
                    throw new Error('登录失败');
                }
                const wxInfo = await platform.getWechatOpenid(res.code);
                console.log('wxInfo.res', wxInfo.res);
                if (wxInfo.res.data.openid) {
                    console.log('wxInfo.res.data.openid', wxInfo.res.data.openid);
                    const user = await users.addUser({
                        nickname:randomName.getNickName(),
                        wx_openid: wxInfo.res.data.openid
                    });
                   
                    uni.setStorageSync('user', user);
                    uni.hideLoading();
                    uni.showToast({
                        title: '登录成功',
                        icon: 'none'
                    });
                    setTimeout(() => {
                        uni.redirectTo({ url: '/pages/index/index' });
                    }, 300);
                }
            } catch (error) {
                uni.showToast({
                    title: error.message || '登录失败',
                    icon: 'error'
                });
            } finally {
                this.loading = false;
            }
        }
    }
};
</script>

<style lang="scss">
.login-container {
    display: flex;
    justify-content: space-between;
    height: 100vh;
    align-items: center;
    flex-flow: column;
    background-color: #fff;
    padding: 200rpx 0;
    .tip {
        width: 80vw;
        height: 200rpx;
        line-height: 2;
        font-style: oblique;
        color: #000;
        //background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8f00ff);
        // -webkit-background-clip: text;
        // -webkit-text-fill-color: transparent;
        .cursor {
            margin-left: 3px;
            animation: blink 0.8s infinite;
            -webkit-text-fill-color: #000;
        }
    }
    @keyframes blink {
        0%,
        100% {
            opacity: 1;
        }
        50% {
            opacity: 0;
        }
    }
    .login-btn {
        width: 50%;
        height: 80rpx;
        background-color: $brand-color;
        color: #fff;
        border-radius: 8rpx;
        font-size: 32rpx;
        box-shadow: $box-show;
    }
}
</style>
